import React, { Component } from 'react';
import { NavBar, Form, Input, Button, Toast } from 'antd-mobile';
import service from '../../api'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
class ChangePass extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            visible: false
        }
    }
    back() {
        this.props.history.replace('/index/mine')
    }
    onFinish(vals: any) {
        vals.userid = localStorage.getItem('userid')
        service.user.updatePassword(vals).then(res => {
            console.log(res)
            if (res.data.code === '200') {
                Toast.show({
                    content: '修改密码成功'
                })
                setTimeout(() => {
                    this.props.history.replace('/index/mine')
                }, 1000);
            }
            else{
                Toast.show({
                    content: res.data.message
                })
            }
        })
    }
    see() {
        this.setState({
            visible: true
        })
    }
    nosee() {
        this.setState({
            visible: false
        })
    }
    render() {
        return (
            <div className='changePass'>
                <header>
                    <NavBar onBack={() => { this.back() }}>修改密码</NavBar>
                </header>
                <Form
                    onFinish={(vals) => { this.onFinish(vals) }}
                    footer={
                        <Button block type='submit' color='primary' size='large'>
                            提交
                        </Button>
                    }
                >
                    <Form.Header>修改密码</Form.Header>
                    <Form.Item label='' name='oldpassword'
                    
                        rules={
                            [
                                { required: true, message: '请输入密码' },
                                { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,14}$/, message: '密码必须为子母和数字组成的6到14位字符' }
                            ]
                        }>
                        <Input
                            className='input'
                            placeholder='请输入旧密码'
                            type='text'
                        />
                    </Form.Item>
                    <Form.Item label='' name='newpassword'
                        extra={
                            <div className='eye'>
                                {!this.state.visible ? (
                                    <EyeInvisibleOutline onClick={() => { this.see() }} />
                                ) : (
                                    <EyeOutline onClick={() => { this.nosee() }} />
                                )}
                            </div>
                        }
                        rules={
                            [
                                { required: true, message: '请输入密码' },
                                { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,14}$/, message: '密码必须为子母和数字组成的6到14位字符' }
                            ]
                        }>
                        <Input
                            className='input'
                            placeholder='请输入密码'
                            type={this.state.visible ? 'text' : 'password'}
                        />
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default ChangePass;